[#include "../../activiti/common/html.ftl" /]
[@html]
    [@head_activiti title="申请列表" css=["fw", "bootstrap-table", "process"] ]
        <style>
            .task-content {
                height: 100%;
                overflow: hidden;
                display: flex;
                flex-direction: column;
                flex-wrap: nowrap;
                justify-content: center;
            }
            .task-content p {
                margin: 0;
                padding: 0;
                width: 100%;
                height: 14px;
                line-height: 10px;
                text-align: center;
                font-size: 10px;
            }
        </style>
        [/@head_activiti]

    [@body]
    [#--主体内容--]
        [@main ]
            <div class="am-g am-radius fw-tables">
                <div class="fw-table">
                    [#--表格主体内容--操作栏--]
                    [@mainHeader]

                    [/@mainHeader]

                    [#--表格主体内容--搜索栏--]
                    [@searchForm]
                        <div class="am-form-group">
                            <input type="text" name="userName" class="am-form-field am-input-sm am-radius"
                                   placeholder="申请人姓名">
                        </div>
                        <div class="am-form-group">
                            <input type="text" name="title" class="am-form-field am-input-sm am-radius" placeholder="申请标题">
                        </div>
                        <div class="am-form-group">
                            <select name="category" class="am-radius" data-am-selected placeholder="操作类型">
                                <option value=""></option>
                                [#list dict.getType("dba_oper_type") as dict]
                                    <option value="${dict.dictValue}">${dict.dictLabel}</option>
                                [/#list]
                            </select>
                        </div>
                        <div class="am-form-group">
                            <select name="category" class="am-radius" data-am-selected placeholder="办理状态">
                                <option value=""></option>
                                [#list dict.getType("act_process_state") as dict]
                                    <option value="${dict.dictValue}">${dict.dictLabel}</option>
                                [/#list]
                            </select>
                        </div>
                        <div class="am-form-group">
                            <div class="am-form-group am-form-icon">
                                <i class="am-icon-calendar"></i>
                                <input type="text" name="params[beginTime]" class="am-form-field am-input-sm am-radius"
                                       placeholder="申请时间-开始"
                                       data-am-datepicker readonly/>
                            </div>
                            <div class="am-form-group am-form-icon">
                                <i class="am-icon-calendar"></i>
                                <input type="text" name="params[endTime]" class="am-form-field am-input-sm am-radius"
                                       placeholder="申请时间-结束"
                                       data-am-datepicker readonly/>
                            </div>
                        </div>
                    [/@searchForm]
                    <div class="wx-handle-main">
                        <div class="wx-basics-launch-title">
                            <div class="am-u-sm-4">
                                <p class="wx-basics-launch-name" style="text-align: left;">申请信息</p>
                            </div>
                            <div class="am-u-sm-1">
                                <p class="wx-basics-launch-name">优先级别</p>
                            </div>
                            <div class="am-u-sm-1">
                                <p class="wx-basics-launch-name">受理单号</p>
                            </div>
                            <div class="am-u-sm-1">
                                <p class="wx-basics-launch-name">上一阶段</p>
                            </div>
                            <div class="am-u-sm-1">
                                <p class="wx-basics-launch-name">当前任务</p>
                            </div>
                            <div class="am-u-sm-1">
                                <p class="wx-basics-launch-name">任务状态</p>
                            </div>
                            <div class="am-u-sm-2">
                                <p class="wx-basics-launch-name">任务信息</p>
                            </div>
                            <div class="am-u-sm-1">
                                <p class="wx-basics-launch-name">办理人</p>
                            </div>
                        </div>
                        <div class="wx-basics-handel-modular am-cf">
                            <div class="wx-basics-handel-modular-checkbox">
                                <label class="am-checkbox am-success">
                                    <input type="checkbox" value="" data-am-ucheck class="userid">
                                </label>
                            </div>
                            <div class="wx-basics-handel-modular-main">
                                <div class="swiper-container">
                                    <div class="swiper-wrapper">
                                        <div class="swiper-slide">
                                            <a href="javascript:;" class="wx-basics-handel-modular-a">
                                                <div class="wx-basics-handel-introduce">
                                                    <div class="am-u-sm-1 wx-basics-handel-introduce-user">
                                                        <img src="${ctx}/osfw/activiti/process/images/user-img.png">
                                                    </div>
                                                    <div class="am-u-sm-3 wx-basics-handel-introduce-main">
                                                        <p>李悠纯<span>10分钟前</span></p>
                                                        <p class="am-text-truncate">给dbadminer表添加字段</p>
                                                    </div>
                                                    <div class="am-u-sm-1 wx-basics-handel-introduce-text">
                                                        <span class="am-badge am-badge-secondary am-round">3</span>
                                                    </div>
                                                    <div class="am-u-sm-1 wx-basics-handel-introduce-text">
                                                        202409039001
                                                    </div>
                                                    <div class="am-u-sm-1 wx-basics-handel-introduce-state">申请</div>
                                                    <div class="am-u-sm-1 wx-basics-handel-introduce-state">审核</div>
                                                    <div class="am-u-sm-1 wx-basics-handel-introduce-state">未签收</div>
                                                    <div class="am-u-sm-2 wx-basics-handel-introduce-text task-content">
                                                        <p>--</p>
                                                    </div>
                                                    <div class="am-u-sm-1 wx-basics-handel-introduce-text">
                                                        --
                                                    </div>
                                                </div>
                                            </a>
                                        </div>
                                        <ul class="am-avg-sm-2 swiper-slide wx-basics-handel-introduce-span">
                                            <li class="fw-btn-warning" onclick="sign(this)">签收</li>
                                            <li class="fw-btn-success" onclick="entrust(this)">委托</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="wx-basics-handel-modular am-cf">
                            <div class="wx-basics-handel-modular-checkbox">
                                <label class="am-checkbox am-success">
                                    <input type="checkbox" value="" data-am-ucheck class="userid">
                                </label>
                            </div>
                            <div class="wx-basics-handel-modular-main">
                                <div class="swiper-container">
                                    <div class="swiper-wrapper">
                                        <div class="swiper-slide">
                                            <a href="javascript:;" class="wx-basics-handel-modular-a">
                                                <div class="wx-basics-handel-introduce">
                                                    <div class="am-u-sm-1 wx-basics-handel-introduce-user">
                                                        <img src="${ctx}/osfw/activiti/process/images/launch-user-img05.png">
                                                    </div>
                                                    <div class="am-u-sm-3 wx-basics-handel-introduce-main">
                                                        <p>Join<span>09/03</span></p>
                                                        <p class="am-text-truncate">现场数据库修改企业表信息</p>
                                                    </div>
                                                    <div class="am-u-sm-1 wx-basics-handel-introduce-text">
                                                        <span class="am-badge am-badge-secondary am-round">3</span>
                                                    </div>
                                                    <div class="am-u-sm-1 wx-basics-handel-introduce-text">
                                                        202409039001
                                                    </div>
                                                    <div class="am-u-sm-1 wx-basics-handel-introduce-state">申请</div>
                                                    <div class="am-u-sm-1 wx-basics-handel-introduce-state">审核</div>
                                                    <div class="am-u-sm-1 wx-basics-handel-introduce-state">办理中</div>
                                                    <div class="am-u-sm-2 wx-basics-handel-introduce-text task-content" style="font-size: 10px;">
                                                        <p>2024-09-03 11:50</p>
                                                        <p>签收该任务</p>
                                                    </div>
                                                    <div class="am-u-sm-1 wx-basics-handel-introduce-text">
                                                        小李
                                                    </div>
                                                </div>
                                            </a>
                                        </div>
                                        <ul class="am-avg-sm-1 swiper-slide wx-basics-handel-introduce-span">
                                            <li class="fw-btn-warning" onclick="banli(this)">审核</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="wx-basics-handel-modular am-cf">
                            <div class="wx-basics-handel-modular-checkbox">
                                <label class="am-checkbox am-success">
                                    <input type="checkbox" value="" data-am-ucheck class="userid">
                                </label>
                            </div>
                            <div class="wx-basics-handel-modular-main">
                                <div class="swiper-container">
                                    <div class="swiper-wrapper">
                                        <div class="swiper-slide">
                                            <a href="javascript:;" class="wx-basics-handel-modular-a">
                                                <div class="wx-basics-handel-introduce">
                                                    <div class="am-u-sm-1 wx-basics-handel-introduce-user">
                                                        <img src="${ctx}/osfw/activiti/process/images/launch-user-img02.png">
                                                    </div>
                                                    <div class="am-u-sm-3 wx-basics-handel-introduce-main">
                                                        <p>钱宝宝<span>09/03</span></p>
                                                        <p class="am-text-truncate">现场数据库修改企业表信息</p>
                                                    </div>
                                                    <div class="am-u-sm-1 wx-basics-handel-introduce-text">
                                                        <span class="am-badge am-badge-secondary am-round">3</span>
                                                    </div>
                                                    <div class="am-u-sm-1 wx-basics-handel-introduce-text">
                                                        202409039002
                                                    </div>
                                                    <div class="am-u-sm-1 wx-basics-handel-introduce-state">测试</div>
                                                    <div class="am-u-sm-1 wx-basics-handel-introduce-state">校对</div>
                                                    <div class="am-u-sm-1 wx-basics-handel-introduce-state">委托中</div>
                                                    <div class="am-u-sm-2 wx-basics-handel-introduce-text task-content" style="font-size: 10px;">
                                                        <p>2024-09-03 13:30</p>
                                                        <p>已委托给小王办理</p>
                                                    </div>
                                                    <div class="am-u-sm-1 wx-basics-handel-introduce-text">
                                                        --
                                                    </div>
                                                </div>
                                            </a>
                                        </div>
                                        <ul class="am-avg-sm-1 swiper-slide wx-basics-handel-introduce-span">
                                            <li class="fw-btn-danger" onclick="cuiban(this)">催办</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="wx-basics-handel-modular am-cf">
                            <div class="wx-basics-handel-modular-checkbox">
                                <label class="am-checkbox am-success">
                                    <input type="checkbox" value="" data-am-ucheck class="userid">
                                </label>
                            </div>
                            <div class="wx-basics-handel-modular-main">
                                <div class="swiper-container">
                                    <div class="swiper-wrapper">
                                        <div class="swiper-slide">
                                            <a href="javascript:;" class="wx-basics-handel-modular-a">
                                                <div class="wx-basics-handel-introduce">
                                                    <div class="am-u-sm-1 wx-basics-handel-introduce-user">
                                                        <img src="${ctx}/osfw/activiti/process/images/launch-user-img06.png">
                                                    </div>
                                                    <div class="am-u-sm-3 wx-basics-handel-introduce-main">
                                                        <p>李依依<span>09/03</span></p>
                                                        <p class="am-text-truncate">同步业务表字典数据</p>
                                                    </div>
                                                    <div class="am-u-sm-1 wx-basics-handel-introduce-text">
                                                        <span class="am-badge am-badge-secondary am-round">3</span>
                                                    </div>
                                                    <div class="am-u-sm-1 wx-basics-handel-introduce-text">
                                                        202409039003
                                                    </div>
                                                    <div class="am-u-sm-1 wx-basics-handel-introduce-state">校对</div>
                                                    <div class="am-u-sm-1 wx-basics-handel-introduce-state">审核</div>
                                                    <div class="am-u-sm-1 wx-basics-handel-introduce-state">办理中</div>
                                                    <div class="am-u-sm-2 wx-basics-handel-introduce-text task-content" style="font-size: 10px;">
                                                        <p>2024-09-03 13:30</p>
                                                        <p>已委托给小王办理</p>
                                                        <p>2024-09-03 14:00</p>
                                                        <p>小王已签收该任务</p>
                                                    </div>
                                                    <div class="am-u-sm-1 wx-basics-handel-introduce-text">
                                                        小王
                                                    </div>
                                                </div>
                                            </a>
                                        </div>
                                        <ul class="am-avg-sm-1 swiper-slide wx-basics-handel-introduce-span">
                                            <li class="fw-btn-danger" onclick="cuiban(this)">催办</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="wx-basics-handel-modular am-cf">
                            <div class="wx-basics-handel-modular-checkbox">
                                <label class="am-checkbox am-success">
                                    <input type="checkbox" value="" data-am-ucheck class="userid">
                                </label>
                            </div>
                            <div class="wx-basics-handel-modular-main">
                                <div class="swiper-container">
                                    <div class="swiper-wrapper">
                                        <div class="swiper-slide">
                                            <a href="javascript:;" class="wx-basics-handel-modular-a">
                                                <div class="wx-basics-handel-introduce">
                                                    <div class="am-u-sm-1 wx-basics-handel-introduce-user">
                                                        <img src="${ctx}/osfw/activiti/process/images/launch-user-img03.png">
                                                    </div>
                                                    <div class="am-u-sm-3 wx-basics-handel-introduce-main">
                                                        <p>肖军<span>09/03</span></p>
                                                        <p class="am-text-truncate">同步业务表字典数据</p>
                                                    </div>
                                                    <div class="am-u-sm-1 wx-basics-handel-introduce-text">
                                                        <span class="am-badge am-badge-secondary am-round">3</span>
                                                    </div>
                                                    <div class="am-u-sm-1 wx-basics-handel-introduce-text">
                                                        202409039004
                                                    </div>
                                                    <div class="am-u-sm-1 wx-basics-handel-introduce-state">校对</div>
                                                    <div class="am-u-sm-1 wx-basics-handel-introduce-state">审核</div>
                                                    <div class="am-u-sm-1 wx-basics-handel-introduce-state">未签收</div>
                                                    <div class="am-u-sm-2 wx-basics-handel-introduce-text task-content" style="font-size: 10px;">
                                                        <p>2024-09-03 15:23</p>
                                                        <p>由小王委托办理该任务</p>
                                                    </div>
                                                    <div class="am-u-sm-1 wx-basics-handel-introduce-text">
                                                        --
                                                    </div>
                                                </div>
                                            </a>
                                        </div>
                                        <ul class="am-avg-sm-2 swiper-slide wx-basics-handel-introduce-span">
                                            <li class="fw-btn-warning" onclick="sign(this)">签收</li>
                                            <li class="fw-btn-success" onclick="nosign(this)">拒收</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        [/@main]

    [#--PC/APP 右侧悬浮按钮--]
        [@rightToolbar /]

        [@script_activiti js=["fw", "bootstrap-table", "process"]]

        [/@script_activiti]
        <script type="text/javascript">
            var prefix = ctx + "osfw/activiti/process";

            var swiper = new Swiper('.swiper-container', {
                slidesPerView: 'auto',
                spaceBetween: 0,
                freeMode: true,
                freeModeSticky: true,
                resistance: true,
            });

            $(function (j) {
                var t = [];
                var m = function (u) {
                    var s = arguments, r = true, t = 1;
                    u = u.replace(/%s/g, function () {
                        var v = s[t++];
                        if (typeof v === "undefined") {
                            r = false;
                            return ""
                        }
                        return v
                    });
                    return r ? u : ""
                };
                var $toolbar = $("#toolbar.fw-manage").find(".fw-model-setup-right");
                $toolbar.html("");
                t = [m('<div class="columns am-btn-group am-btn-group-xs fw-function-oper-btn">')];
                t.push(m('<button class="am-btn am-btn-default am-btn-xs am-radius" type="button" name="showSearch" title="搜索"><i class=" am-icon-search"></i></button>'));
                t.push(m('<button class="am-btn am-btn-default am-btn-xs am-radius" type="button" name="refresh" title="刷新"><i class=" am-icon-refresh"></i></button>'));
                t.push('</div>');
                if (t.length > 2) {
                    $toolbar.append(t.join(""));
                }
                $toolbar.find('button[name="refresh"]').off("click").on("click", function () {
                    alert("刷新数据");
                });
                $toolbar.find('button[name="showSearch"]').off("click").on("click", function () {
                    $(this).parents(".fw-tables").find(".search-collapse").slideToggle();
                });
            });

            function sign() {
                $.modal.msgSuccess("签收成功，请尽快办理");
            }

            function nosign(obj) {
                $.modal.confirm("确认要拒签该[ 审核 ]任务吗？", function () {
                    $.modal.msgSuccess("拒签成功");
                });
            }

            function cuiban() {
                $.modal.msgSuccess("催办成功，请耐心等待");
            }
            
            function banli(obj) {
                $.modal.openFull($(obj).text(), ctx + "osfw/activiti/process/banli");
            }

            // 回退
            var entrust= function(id, procKey, version) {
                // 查询版本列表 todo
                var option = '<option value="" selected>-- 请选择 --</option>\n';
                option += '<option value="1" >俊梓</option>\n';
                option += '<option value="2" >测试</option>\n';
                option += '<option value="3" >测试2</option>\n';
                option += '<option value="4" >测试0801</option>\n';
                option += '<option value="5" >管理员</option>\n';
                $.modal.prompt("确定委托该条待办记录吗？", "请选择您要委托办理的人员：", "", "select", function (data) {
                    var url = table.options.fallbackUrl;
                    var data = { "id": id, "fallbackVersion": data[0].val(), "deleteReason": data[1]};
                    $.operate.submit(url, "post", "json", data);
                }, "cancel", option, "", "");
            };

        </script>
    [/@body]
[/@html]
